<!DOCTYPE html>
<html>
	<meta charset="utf-8">
	<title>HBuilderX-高效极客技巧</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<style>
		body {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			height: 100vh;
			background-image: linear-gradient(to top, #9795f0 0%, #fbc8d5 100%);
			overflow: hidden;
		}
		.shell {
			position: relative;
			width: 60vw;
			height: 40vw;
			max-width: 380px;
			max-height: 250px;
			margin: 0;
			color: white;
			perspective: 1200px;
			transform-origin: center;
		}
		.content {
			display: flex;
			justify-self: center;
			align-items: center;
			position: absolute;
			height: 100%;
			width: 100%;
			transform-origin: center;
			transform-style: preserve-3d;
			transform: translateZ(-30vw) rotateY(0);
			animation: carousel 9s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
		}
		
		.item {
			position: absolute;
			width: 60vw;
			height: 40vw;
			max-width: 380px;
			max-height: 250px;
			box-shadow: 0 5px 20px rgb(0, 0, 0, .3);
			border-radius: 6px;
			background-size: cover;
			-webkit-box-reflect: below 25px -webkit-linear-gradient(transparent 50%, rgb(255, 255, 255, .3));
		}
		
		.item:nth-child(1) {
			background-image: url(./1.jpg);
			transform: rotateY(0) translateZ(35vw);
		}
		
		.item:nth-child(2) {
			background-image: url(./2.jpg);
			transform: rotateY(120deg) translateZ(35vw);
		}
		
		.item:nth-child(3) {
			background-image: url(./3.jpg);
			transform: rotateY(240deg) translateZ(35vw);
		}
		
		@keyframes carousel {
			0%, 17.5% { transform: translateZ(-35vw) rotateY(0); }
			27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); }
			55%, 72.5% { transform: translateZ(-35vw) rotateY(-240deg); }
			82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); }
		}
		
	</style>

<body>
	<div class="shell">
		<div class="content">
			<div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
	</div>
	
	
</body>	
</html>
